<template>
  <div class="app-container">
    <div class="operation-container">
      <el-table
        ref="dictTable"
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        row-key="id"
        fit
        stripe
        highlight-current-row
      >
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
        />
        <el-table-column label="任务名称" prop="name" />
        <el-table-column label="任务分组" prop="subgroup" />
        <el-table-column label="执行类" prop="jobClass" width="600" />
        <el-table-column label="执行表达式" prop="core" />
        <el-table-column label="状态" prop="status" width="100">
          <template slot-scope="{row}">
            <template v-for="(item,index) in dict['sys_implement_type']">
              <el-tag v-if="item.value === row.status" :key="index" :type="item.listClass">{{ item.label }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="180">
          <template slot-scope="{row}">
            <i class="el-icon-time margin-right-5" />
            <span>{{ row.createTime | dateFormat }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNumber" :limit.sync="listQuery.pageSize" @pagination="getList" />
    </div>
  </div>
</template>
<script>
import { fetchList } from '@/api/job'
import { mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      tableKey: 0,
      dialog: false,
      dialogStatus: undefined,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        pageNumber: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    ...mapGetters([
      'dict'
    ])
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.2 * 1000)
      })
    },
    indexMethod(index) {
      return index + 1
    }
  }
}
</script>
